<template>
    <div class="box">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>模拟考试记录</span>
                </div>
            </template>
            <!-- 表单查询部分 -->
            <div class="query">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-row :gutter="20">
                        <el-col :span="6" :offset="0">
                            <el-form-item label="学员姓名：">
                                <el-input v-model="formInline.name" placeholder="请输入学员姓名" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="0">
                            <el-form-item label="训练科目">
                                <el-select v-model="formInline.subject" placeholder="请选择报名校区" clearable>
                                    <el-option label="全部" value="" />
                                    <el-option label="科目一" value="科目一" />
                                    <el-option label="科目二" value="科目二" />
                                    <el-option label="科目三" value="科目三" />
                                    <el-option label="科目四" value="科目四" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2" :offset="0">
                            <el-form-item>
                                <el-button type="warning" @click="onSubmit">查询</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <!-- 表头筛选按钮 -->
            <div class="threeBtn">
                <el-row justify="space-between">
                    <el-col :span="16" :offset="0">
                        <el-button type="success" round :icon="Edit" @click="handleScore">批量输入模拟考试成绩</el-button>
                    </el-col>
                    <!-- 三个小按钮 -->
                    <el-col :span="3" :offset="0">
                        <el-tooltip content="导出" placement="top" effect="light">
                            <el-button type="success" :icon="Upload" circle @click="handleExportExcel" />
                        </el-tooltip>
                        <el-tooltip content="筛选列" placement="top" effect="light">
                            <el-button type="danger" :icon="Operation" circle />
                        </el-tooltip>
                        <el-tooltip content="打印" placement="top" effect="light">
                            <el-button type="warning" :icon="Printer" circle />
                        </el-tooltip>
                    </el-col>
                </el-row>

            </div>
            <!-- 表格部分 -->
            <!-- 表格文本居中对齐 -->
            <el-table 
            :data="tableData" style="width: 100%" border
                :header-cell-style="{ background: '#f2f2f2', textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"
                @selection-change="selChange">
                <el-table-column type="selection" width="55" />
                <el-table-column fixed prop="name" label="学员姓名" width="100" />
                <el-table-column prop="tel" label="手机号码" width="140" />
                <el-table-column prop="cardId" label="身份证号" width="200" />
                <el-table-column prop="carType" label="准驾车型" width="120" />
                <el-table-column prop="subject" label="当前科目" width="120" />
                <el-table-column prop="state" label="状态" width="120" />
                <el-table-column prop="mockTime" label="模拟时间" width="160" />
                <el-table-column prop="completeTime" label="完成时间" width="160" />
                <el-table-column prop="comment" label="备注" width="120" />
                <el-table-column fixed="right" label="操作" width="120">
                    <template #default="scope">
                        <el-popconfirm width="150" confirm-button-text="yes" cancel-button-text="No"
                            confirm-button-type="danger" cancel-button-type="success" :icon="InfoFilled"
                            icon-color="#ee6677" title="确定删除吗？" @confirm="handleDel(scope)" @cancel="cancelEvent">
                            <template #reference>
                                <el-button class="mr2" type="danger" plain round size="small" :icon="Edit">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页部分 -->
            <!-- 分页器汉化 -->
            <el-config-provider :locale="locale">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </el-config-provider>
            <el-drawer v-model="drawer" title="批量修改模拟成绩">
                <BatchForm :selArr="selsArr" :tableData="tableData"  @getNewTableDate="handleTableData"
                />
            </el-drawer>
        </el-card>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { reactive } from 'vue'
import { mockExamGet, mockExamrDel } from '../../api/student'
import { Edit, Upload, Printer, Operation, InfoFilled } from '@element-plus/icons-vue'
//分页器汉化
import { ElMessage } from 'element-plus';
import locale from "element-plus/es/locale/lang/zh-cn";
import { exportExcel } from "../../utils/exportExcel"
import BatchForm from "./components/batchForm.vue"
import {mockExamType} from "../../types/examType"
import {useRoute} from "vue-router"
//查询条件表单数据

const route =useRoute()
let cardId=route.query
const formInline = reactive({
    name: '',
    subject: ''
})
//表单查询功能
const onSubmit = () => {
    console.log(formInline);
    //发生对象引用，导致查询输入框显示[Object object]
    mockExamGet(1, 5, { ...formInline }).then(res => {
        tableData.value = res.data.results
        total.value = res.data.count
    })

}
//获取学员数据
const tableData = ref<mockExamType[]>([])
mockExamGet(1, 5,cardId).then(res => {
    tableData.value = res.data.results
    total.value = res.data.count
})
// 分页功能
//当前页码
const currentPage = ref(1)
// 每页显示条数
const pageSize = ref(5)
const total = ref(0)
const handleSizeChange = (val: number) => {
    pageSize.value = val
    currentPage.value = 1
    mockExamGet(currentPage.value, val,{ ...formInline }).then(res => {
        tableData.value = res.data.results
        total.value = res.data.count
    })
}

// 切换页码
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    mockExamGet(val, pageSize.value,{ ...formInline }).then(res => {
        tableData.value = res.data.results
        total.value = res.data.count
    })
}
//表格导出功能
const handleExportExcel = () => {
    console.log("表格导出", tableData.value);
    //表头中文名
    const titleArr = ['id', '巡河次数', '完成次数', '巡河人员', '时间']
    exportExcel(tableData.value, 'test', titleArr, 'sheetName');
}

//删除一行数
const handleDel = (rowVal: any) => {
    console.log(rowVal.row.objectId);
    mockExamrDel(rowVal.row.objectId).then(async () => {
        let res = await mockExamGet(currentPage.value, 5)
        tableData.value = res.data.results
        total.value = res.data.count
    })
    tableData.value.splice(rowVal.$index, 1)
}
const cancelEvent = () => {
    console.log('cancel!')
}


//批量修改成绩
const drawer = ref(false)
const handleScore = () => {
    if (selsArr.value.length) {
        drawer.value = true
        console.log("id数组", selsArr.value);

    } else {
        ElMessage({
            message: '至少选择一条数据',
            type: 'warning',
        })
    }
}
let selsArr = ref<Array<string>>([])  //选中行Id
const selChange = (sel:mockExamType[]) => {
    let arr: Array<string> = []
    sel.forEach(item => {
        console.log(item.objectId);
        arr.push(item.objectId)
    });
    selsArr.value = arr
}

//接收子组件传递的新的tableDate
const handleTableData=()=>{
    // nval:mockExamType
    drawer.value=false
}
</script>

<style lang="scss" scoped>
.query {
    border: 1px solid #ddd;
    padding: 20px;
    /* background: #eee; */
}

.el-pagination {
    margin-top: 20px;
}

.threeBtn {
    border: 1px solid #ddd;
    background: #f2f2f2;
    margin-top: 20px;
    padding: 16px;
}
</style>